<template>
    <div class="tab-box">
      <div v-for="(item,index) in tabList" :key="index" :class="status[index]==currentIndex?'active-tab tab':'tab'" @click="tabChoose(status[index])">{{item}}</div>
    </div>
</template>

<script>
export default {
  name: "tabs",
  data(){
    return{
      currentIndex:this.activeTab
    }
  },
  model:{
      prop:"activeTab",
      event:"change"
  },
  props:{
    activeTab:Number,
    tabList:Array,
    status:Array
  },
  methods:{
      tabChoose(index){
        this.currentIndex = index
        this.$emit('change',index);
      }
  },
  computed:{
  }
}
</script>

<style scoped>
.tab-box{
  height:0.8rem;
  background: #42B574;
  box-shadow: 0 0.03rem 0.06rem #999;
  display: flex;
  justify-content: space-around;
  font-size: 0.30rem;
  line-height: 0.8rem;
  font-weight: 600;
  color:#C7E9D6;
}
.tab{
  flex:1;
  height: 0.8rem;
  position: relative;
}
.active-tab{
  color:#fff;
  height:0.72rem;
  border-bottom: 0.08rem solid #259B25;
}
</style>
